<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安卓2秒、苹果6秒:base64自动播放</title>

</head>

<body>
    <!-- <video id="vid" width="200" height="200" autoplay="true" muted="true" webkit-playsinline="" playsinline="" src=""></video> -->
    <input type="file" accept="video/*" capture=camcorder" value="上传" onchange="show(this)">


    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        var videoSrc = null;
        var video = document.createElement("video");
        let canvas = document.createElement("canvas");

        function show(el){
          // var video=document.getElementById('vid');    
        //拿到视频文件后转换成url
        let reader = new FileReader();
        //把目标文件转地址，文件来自于上传组件。
        reader.readAsDataURL(el.files.item(0));
        //文件准备好开始将bs64数据传入视频标签中
        reader.onload = function () {
          videoSrc = reader.result;
        //   console.log(videoSrc);
          video.src = videoSrc;
          video.width = 1080;
          video.height = 1920;
          video.muted = true;
          video.autoplay = true;
          video.preload = true;
          video.setAttribute("playsinline", "");
          video.setAttribute("webkit-playsinline", "");
            //当视频数据加载完毕时，我们需要先播放视频，从而实现视频截图，解决视频图片空白的问题；
            // console.log("window.WeixinJSBridge:",window.WeixinJSBridge)
          if (window.WeixinJSBridge) {
              //微信自带浏览器中走判断1
              console.log("判断1")
              WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                video.play();
              }, false);
            } else {
              //非微信浏览器中走判断2
              console.log("判断2")
              // document.addEventListener("WeixinJSBridgeReady", function () {
              //   WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                  video.play();
              //   });
              // }, false);

            }
            // 在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。
            // 如果你用 javascript 代码显式调用play方法，你将会在控制台看到如下异常：Uncaught (in promise) DOMException。
            // 这是因为，Chrome只允许用户主动对网页进行主动触发后才可自动播放音频和视频。
            // video.play();
          //拿到视频src后开始播放
          getVideoBase64(video.src,video,canvas);
        }

        };

        function getVideoBase64(url,video,canvas) {
        return new Promise((resovle) => {
          let dataUrl = "";

          video.onloadeddata = function () {

            
            setTimeout(() => {
              //设置定时器，播放10ms后,停止播放，然后用canvas生成图片；
              video.pause();
              let multiple = 0.3;
              canvas.width = video.width * multiple;
              canvas.height = video.height * multiple;
              let ctx = canvas.getContext("2d");
              ctx.drawImage(video, 0, 0, video.width * multiple, video.height * multiple);
              dataUrl = canvas.toDataURL("image/png");
              let img = new Image();
              img.src = dataUrl;
            //   img.width = 100;
            //   img.height = 100;
              img.style = "border:1px solid red";
            //   document.querySelector("div").appendChild(img); 
              document.body.appendChild(img);
              video.remove(); //删除创建的视频标签
              resovle(dataUrl);
            }, 10);
          };
        });
      }
    </script>
    <!-- 移动端调试控制台 -->
    <!-- <script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
    <script>
      eruda.init();
    </script> -->
</body>
</html>